<template>
    <div class="ActContainer">
        <div class="item-box" v-for="item of list" :key="item.id">
            <div class="item-left" :style="{backgroundImage: 'url(' + item.imgUrl + ')'}"></div> 
            <div class="item-right">
                <p class="item-right__title">{{item.title}}</p>
                <p class="item-right__common">{{item.time}}</p>
                <p class="item-right__common">状态：<em :style="{color: item.status === 1?'#ff721f' : '#999999'}">{{item.status === 0?'未开始' : item.status===1?'进行中':'已结束'}}</em></p>
                <div class="comment-style">
                    <router-link :to="'/comment/' + item.id" tag="span" class="iconfont item-right__iconfont">{{item.status === 2?'&#xeedf;':'&#xe639;'}}</router-link>
                    <router-link to="/interactive" tag="span" class="iconfont item-right__iconfont">&#xeedc;</router-link>
                </div>
                <!-- <router-link to="/comment" v-if="item.status === 2 && item.hadComment === 0" tag="div" class="item-right__comment comment-style">
                    评价
                </router-link> -->
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'Activity',
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#fff;height:100%',)
    },
    beforeDestroy () {
        document.querySelector('body').setAttribute('style', '')
    },
    data () {
        return {
            list: [{
                id: 0,
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '下周三 14:00',
                status: 0, //0:未开始 1:进行中 2:已结束
                hadComment: 0 //0为评论 1为已评论
            },{
                id: 1,
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '周三 14:00',
                status: 1,
                hadComment: 0
            },{
                id: 3,
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '上周三 14:00',
                status: 2,
                hadComment: 1
            },{
                id: 4,
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                title: '6.20走进中山大学创新创业学院资源对接会',
                time: '上周三 14:00',
                status: 2,
                hadComment: 0
            }]
        }
    },
    methods: {
        
    }
}
</script>

<style lang="stylus" scoped>

.ActContainer
    width: 100%
    background: #fff
    padding: .3rem 0 0
    .item-box
        margin-bottom: .3rem
        border-bottom: 1px solid #ccc
        box-sizing: border-box
        padding: 0 .3rem .3rem
        overflow: hidden
        display: flex
        .item-left
            width: 2.7rem
            height: 1.8rem
            overflow:hidden
            background-position: center center
            background-repeat: no-repeat
            -webkit-background-size:cover
            -moz-background-size:cover
            background-size:cover
            margin-right: .3rem
        .item-right
            flex: 1
            position: relative
            .item-right__title
                margin-top: .20rem
                font-size: .30rem
                line-height: .35rem
                font-weight: 600
            .item-right__common
                font-size: .2rem
                margin-top: .16rem
                color: #999999
            .item-right__comment
                padding: .13rem .24rem
                color: #ff721f
                border: 1px solid #ff721f
            .item-right__commentView
                padding: .13rem .16rem
                color: #5f646e
                border: 1px solid #5f646e
            .comment-style
                position: absolute 
                right: 0
                bottom: .05rem
                .item-right__iconfont
                    font-size: .4rem




</style>


